<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			/* 盒子模拟4个元素:content内容,padding内边距,border表格边框,margin外边距 */
			.box{
				width: 200px;/* 宽 */
				height: 300px;/* 高 */
				/* border-width:边框宽度 */
				/* border-color:red;边框颜色：颜色单词，#6位十六进制数，rgb（三个值，每个值0~255 */
				/* solid实线 dotted点线 dashed虚线
				 border-style：solid;*/
				border: solid 1px rgb(168,62,177);
				border-bottom: 10px dotted red;
				border-top:10px dashed green;
				border-left:solid 5px rgb(170,255,255);
				border-right: 5px solid pink;
				/* 方位词：top上，bottom下，left左，right右，center中间 */
				/* padding-top: 50px;
				padding-left: 30px; */
				/* 复合写法 */
				/* padding: 10px;四个方位的内边距都是10px*/
				/* padding: 10px 30px ; 第一个值指上下，第二个值指左右*/
				/* padding: 10px 20px 30px;第一个上，第二个左右，第三个下 */
				/* padding: 10px 20px 30px 40px;上，右，下，左（顺时针） */
				
			}
			
		</style>
	</head>
	<body>
		<div class="box">hello box</div>
		
	</body>
</html>
